<template>
    <ul class="navbar-container">
        <li
            v-for="item in list"
            :key="item.id"
            class="navbar-item"
            :class="{'is-active': $route.path === item.path}"
        >
            <router-link class="link" :to="item.path">{{item.title}}</router-link>
        </li>
    </ul>
</template>

<script>
export default {
    name: 'Navbar',
    data () {
        return {
            list: [
                {
                    path: '/',
                    title: '新歌'
                },
                {
                    path: '/rank/list',
                    title: '排行'
                },
                {
                    path: '/plist/index',
                    title: '歌单'
                },
                {
                    path: '/singer/class',
                    title: '歌手'
                }
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
$height: 40px;
.navbar-container {
    display: flex;
    width: 100%;
    height: $height;
    background: #fff;
    box-shadow: 0 2px 2px 0 #f4f4f4;
    .navbar-item {
        width: 25%;
        height: 100%;
        text-align: center;
        line-height: $height;
        .link {
            color: #333;
            font-size: 1.1rem
        }
        &.is-active {
            border-bottom: 3px solid #2ca2f9;
            a {
                color: #2ca2f9;
            }
        }
    }
}
</style>
